<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>songList</title>
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../node_modules/art-template/lib/template-web.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="./js/request.js"></script>
    <script src="./js/common.js"></script>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/common/reset.css">
    <link rel="stylesheet" href="./css/common/songList.css">
    <link rel="stylesheet" href="./css/common/common.css">
    <link rel="stylesheet" href="./css/base/base.css">
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <link rel="shortcut icon" href="./resource/static/favicon.ico" type="image/x-icon">
</head>

<body>
    <!-- 头部部分 -->
    <header></header>
    <!-- main -->
    <main>
        <div class="main">
            <div class="song-box">
                <div class="song-bd">
                    <div class="song-wrap">
                        <nav class="song-nav">
                            <div>
                                <span class="song-all">全部</span>
                                <button id="_select" onclick="show()">选择分类&nbsp;&nbsp; <span
                                        class="iconfont icon-jt jt"></span></button>
                            </div>
                            <div class="songOn">
                                <a href="#" class="song-hot">热门</a>
                            </div>
                        </nav>


                        <div class="n-sltlyr">
                            <div class="hd"><i class="icn"></i></div>
                            <div class="bd">
                                <h3><a class="" data-cat="全部"><span>全部风格</span></a>
                                </h3>
                                <dl class="f-cb">
                                    <dt><i class="u-icn u-icn-71"></i>语种</dt>
                                    <dd class="langes"></dd>
                                </dl>
                                <dl class="f-cb">
                                    <dt><i class="u-icn u-icn-6"></i>风格</dt>
                                    <dd class="styles"></dd>
                                </dl>
                                <dl class="f-cb">
                                    <dt><i class="u-icn u-icn-7"></i>场景</dt>
                                    <dd class="scene"></dd>
                                </dl>
                                <dl class="f-cb">
                                    <dt><i class="u-icn u-icn-8"></i>情感</dt>
                                    <dd class="emotion"></dd>
                                </dl>
                                <dl class="f-cb">
                                    <dt><i class="u-icn u-icn-9"></i>主题</dt>
                                    <dd class="last theme"></dd>
                                </dl>
                            </div>
                        </div>


                        <ul class="m-cvrlst f-cb album"></ul>
                        <div class="pageation"></div>
                    </div>

                </div>
            </div>
            <!-- 渲染我们的toast列表 -->
            <script type="text/html" id="selectOps0">
                {{ each data item index }}
                    <a class="s-fc1 toast0" href="javascript:void(0)" disabled="true" data-cat="{{ item.name }}">{{ item.name }}</a><span class="line">|</span>
                {{ /each }}
            </script>
            <script type="text/html" id="selectOps1">
                {{ each data item index }}
                    <a class="s-fc1 toast1" href="javascript:void(0)" data-cat="{{ item.name }}">{{ item.name }}</a><span class="line">|</span>
                {{ /each }}
            </script>
            <script type="text/html" id="selectOps2">
                {{ each data item index }}
                    <a class="s-fc1 toast2" href="javascript:void(0)" data-cat="{{ item.name }}">{{ item.name }}</a><span class="line">|</span>
                {{ /each }}
            </script>
            <script type="text/html" id="selectOps3">
                {{ each data item index }}
                    <a class="s-fc1 toast3" href="javascript:void(0)" data-cat="{{ item.name }}">{{ item.name }}</a><span class="line">|</span>
                {{ /each }}
            </script>
            <script type="text/html" id="selectOps4">
                {{ each data item index }}
                    <a class="s-fc1 toast4" href="javascript:void(0)" data-cat="{{ item.name }}">{{ item.name }}</a><span class="line">|</span>
                {{ /each }}
            </script>
            <!-- 歌单列表渲染 -->
            <script type="text/html" id="tpl">
                {{ each data item index }}
                    <li class="reqLis">
                        <div class="u-cover">
                            <img class="j-flag"
                                src="{{ item.coverImgUrl }}" />
                            <a class="msk" href="javascript:void(0)"></a>
                            <div class="bottom">
                                <a class="icon-play f-fr" title="播放" href="javascript:void(0)"></a>
                                <span class="icon-headset"></span>
                                <span class="math">{{ item.playCount | dateFormat }}</span>
                            </div>
                        </div>
                        <p class="dec">
                            <a title="{{ item.name }}" href="./album.html" data-id = {{ item.id }} class="tit ellip">{{ item.name }}</a>
                        </p>
                        <p><span class="by">by</span>
                            <a title="{{ item.subscribers[0].nickname }}" href="javascript:void(0)" class="nm nm-icn ellip">{{ item.subscribers[0].nickname }}</a>
                        </p>
                    </li>
                {{ /each }}
            </script>
            <!-- 分页渲染 -->
            <script type="text/html" id="page">
                <div class="pageNation">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                          <% for (let [text, pid] of pager) { %>
                            <li>
                                <a href="javascript:chkLis(<%=pid %>);" aria-label="Previous">
                                  <span aria-hidden="true"><%=text %></span>
                                </a>
                              </li>
                            <% } %>
                        </ul>
                      </nav>
                </div>
            </script>
    </main>
    <!-- footer页面 -->
    <footer></footer>
    <script>
        let btn = document.querySelector('#_select')
        let songlist = document.querySelector('.n-sltlyr')
        btn.onclick = function () {
            songlist.classList.toggle('_showdow')
        }
    </script>
    <script src="./js/reqSongList.js"></script>
    <script src="./js/module/appendID.js"></script>

</body>

</html>